<!-- 企业信息审核 -->
<template>
  <div>
    <Modal v-model="modalValue" width="960" title="查看定位" :mask-closable="false" footer-hide @on-cancel="onCancel">
      <Form>
        <Row class="com-form-item">
          <Col span="24">
            <FormItem label="项目地址:">{{ info.projectAddressName }}</FormItem>
          </Col>
        </Row>
      </Form>
      <div id="allmap"></div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'viewLocation',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    value: {
      handler (val) {
        this.modalValue = val
        if (val) {
          this.init()
        }
      }
    }
  },
  data () {
    return {
      modalValue: false,
    }
  },
  mounted () {

  },
  methods: {
    // 初始化数据
    init () {
      const { longitude, latitude } = this.info

      this.$nextTick(() => {
        const map = new BMapGL.Map('allmap');
        const point = new BMapGL.Point(longitude, latitude);
        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom(true);
        // 创建点标记
        const marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
      })
    },
    onCancel () {
      this.$emit('input', false)
    },
  }
};
</script>

<style lang="less" scoped>
#allmap {
  width: 100%;
  height: 400px;
  margin: 5px 0;
  border-radius: 10px;
}
</style>
